<template>
    <div class="map">
        <div id="mapCharts"></div>
        <div v-if="show && mapData.length > 0" style="position: absolute; z-index: 9999999; background-color: rgba(0, 0, 0, 0.7); border-radius: 4px; color: rgb(255, 255, 255); font: 12px/18px &quot;Microsoft YaHei&quot;; padding: 10px; left: 154.344px; top: 170.484px; pointer-events: auto;">
            <div style="width:3px; height:11px;background: #45BE00;display: inline-block;vertical-align: middle; margin-right: 6px;"></div>
            {{mapData[0].name}}<br>
            <span style="color: #D5D5D5">用户：{{mapData[0].total}}<br>排名：{{mapData[0].ranking}}</span>
        </div>
    </div>
    
</template>
<script>
import echarts from "echarts";
require('echarts/map/js/china.js');
import { setInterval } from 'timers';
export default {
    props: {
        mapData: Array,
        blingData: Array
    },
    data(){
        return{
            show: true
        }
    },
     watch: {
        mapData(){
            this.drawLine();
        }
    },
    mounted () {
        if (this.mapData && this.mapData.length > 0) {
            this.drawLine();
        }
    },
    methods:{
        drawLine(){
            var myChart = echarts.init(document.getElementById('mapCharts'));
            let bling=this.blingData;
            var mapName = 'china';
            let data=this.mapData;
            let color=[];
            for(let i in data){
                if(data[i].total<10000){
                    color.push({
                        name: data[i].name,
                        itemStyle:{
                            borderColor:'white',
                            areaColor:'#E1F4D6'
                        }
                    }) 
                }else if(data[i].total >10001 && data[i].total< 50000){
                    color.push({
                        name: data[i].name,
                        itemStyle:{
                            borderColor:'white',
                            areaColor:'#C3EAAD'
                        }
                    }) 
                }else if(data[i].total> 50001 && data[i].total< 100000){
                    color.push({
                        name: data[i].name,
                        itemStyle:{
                            borderColor:'white',
                            areaColor:'#A6E085'
                        }
                    }) 
                }else if(data[i].total> 100001 && data[i].total< 150000){
                    color.push({
                        name: data[i].name,
                        itemStyle:{
                            borderColor:'white',
                            areaColor:'#88D65C'
                        }
                    })  
                }else if(data[i].total> 150001 && data[i].total< 200000){
                    color.push({
                        name: data[i].name,
                        itemStyle:{
                            borderColor:'white',
                            areaColor:'#6ACB33'
                        }
                    }) 
                }else if(data[i].total> 200001){
                    color.push({
                        name: data[i].name,
                        itemStyle:{
                            borderColor:'white',
                            areaColor:'#45BE00'
                        }
                    }) 
                }
            }
            var geoCoordMap = {};
            /*获取地图数据*/
            myChart.showLoading();
            var mapFeatures = echarts.getMap(mapName).geoJson.features;
            myChart.hideLoading();
            mapFeatures.forEach(function(v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;

            });
            var convertData = function(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            total: data[i].total,
                            ranking: data[i].ranking,
                            value: geoCoord.concat(data[i].total/1000),
                        });
                    }
                }
                return res;
            };
            var option = {
                visualMap: {
                    show: false,
                    min: 0,
                    max: 200,
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        color: ['#45BE00', '#E1F4D6'] 
                    }
                },
                 tooltip: {
                    padding: 10,
                    alwaysShowContent:true,
                    enterable: true,
                    transitionDuration: 1,
                    backgroundColor:'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#fff',
                        decoration: 'none',
                        fontSize: 12
                    },
                    formatter: function(params) {
                        return '<div style="width:3px; height:11px;background: #45BE00;display: inline-block;vertical-align: middle; margin-right: 6px;"></div>'+params.name +'<br /><span style="color: #D5D5D5">用户：'+params.data['total']  + '<br />排名：' + params.data['ranking']+'</span>'
                    },
                },
                geo: {
                    show: true,
                    map: mapName,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: true,
                    scaleLimit:{
                        min:1.2
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#45be00',
                            areaColor: '#daf2cc',
                            label: {
                                show: false
                            }
                        },
                        emphasis: {
                            areaColor: '#45be00',
                            label: {
                                show: false
                            }
                        }
                    },
                    regions: color
                },
                series: [
                    {
                        name: '散点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbol:'none',
                    },
                    {
                        type: 'map',
                        map: mapName,
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        roam: true,
                        itemStyle: {
                            normal: {
                                borderColor: '#45be00',
                                areaColor: '#daf2cc',
                                label: {
                                    show: false
                                }
                            },
                            emphasis: {
                                areaColor: '#45be00',
                                label: {
                                    show: false
                                }
                            }
                        },
                        animation: false,
                        data: data
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(bling),
                        symbolSize: function(val) {
                            return val[2] / 10;
                        },
                        symbol:'image://https://static.shengxue985.com/oss/pic/20181129/3/19cbc7d144054a199a90cd103543739e.png',
                        symbolSize:30,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke',
                             scale:0
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        zlevel: 1
                    },
                ]
            };
            var timesRun = 0;
            var interval = setInterval(function(){
                timesRun += 1;
                if(timesRun === 3){
                    option.series[2].symbol='none';
                    myChart.setOption(option);
                    clearInterval(interval);
                }
            }, 1000);
            myChart.setOption(option);
            window.addEventListener("resize", function() {
                myChart.resize();
            });
            let self=this;
            myChart.on('click', function (params) {
                self.show=false
            });
            myChart.on('mouseover', function (params) {
                self.show=false
            });
        }
    }
}
</script>

<style lang="scss">
.map{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
    #mapCharts{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
